<template>
    <div class="main" >
        <div class="cover_c">
            <div class="cover"><img src="https://xxx.oss.com/dxdh/%E8%92%99%E7%89%88%E7%BB%84%201.png" alt="" style="width:100%;height:100%"></div>
        </div>
        <div class="content">
            <div class="menu">
                <div class="menu_item" @click="pageContral(1)" :class="{active:current===1}">批次控制线</div>
                <div class="menu_item" @click="pageContral(2)" :class="{active:current===2}">一分一段表</div>
               <!-- <div class="menu_item" @click="pageContral(3)" :class="{active:current===3}">最低投档线</div> -->
            </div>
            <div class="display" v-loading="loadingFlag" :class="{disabled:current===3}">
                <div class="title">往年数据</div>
                    <div class="middle">
                        <div class="blue"></div>
                        <div class="subtitle">{{subtitle}}</div>
                    </div>  
                    <div class="explain">{{explain}}
                    </div>
                    <div class="form">
                        <el-form ref="form" :model="form" label-width="120px" style="width:500px;" size="medium" id="selectform">                            
                            <el-form-item label="参考年份: " style="margin-top:48px">
                                <el-select v-model="form.year" placeholder="请选择您的参考年份" style="width:100%">
                                <el-option label="2021" value=2021></el-option>
                                <el-option label="2020" value=2020></el-option>
                                <el-option label="2019" value=2019></el-option>
                                <!-- <el-option label="区域二" value="beijing"></el-option> -->
                                </el-select>
                            </el-form-item>                            
                            <el-form-item label="选择科类: " style="margin-top:48px">
                                <el-select v-model="form.subject" placeholder="请选择您的高考科类" style="width:100%">
                                <el-option label="文科" value=0></el-option>
                                <el-option label="理科" value=1></el-option>
                                <el-option label="新高考" value=2></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="选择批次: " style="margin-top:48px" v-if="current==1||current==3">
                                <el-select v-model="form.batches" placeholder="请选择您的高考批次" style="width:100%">
                                <el-option label="本科一批" value=0></el-option>
                                <el-option label="本科二批" value=1></el-option>
                                <el-option label="新高考" value=2></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="搜索: " style="margin-top:48px" v-if="current==3">
                                <el-input placeholder="请输入您要查询的院校名称" v-model="form.school"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <el-button class="submit" type="primary" @click="search()">开始查询</el-button>
                    </div>
                    <div v-if="showFlag==1" class="table1">
                        <table border="1">
                            <thead>
                                <tr>
                                    <th>省份</th>
                                    <th>控制线</th>
                                    <th>排名</th>
                                    <th>年份</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="second">
                                    <td>{{province}}</td>
                                    <td>{{batchForm.controlLine}}</td>
                                    <td>{{batchForm.controlLineRanking}}</td>
                                    <td>{{batchForm.year}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 以下为与table.vue几乎重复的烂代码 由于要做懒加载没想好如何在table.vue中扩展功能 一天时间要交工来不及做 谁接手了记得优化-->
                    <div v-if="showFlag==2" class="table2">
                        <el-table
                        v-el-table-infinite-scroll="load"
                        height="500px"
                        :data="tableData"
                        :header-cell-style="theader"
                        :cell-style="tableRowStyle"
                        id="collegeTable"
                        >
                            <el-table-column
                                min-width="80"
                                class-name="column"
                                prop="collegeCode"
                                label="院校代码">
                            </el-table-column>
                            <el-table-column
                                width="170"
                                prop="collegeName"
                                label="院校名称">
                            </el-table-column>
                            <el-table-column
                                prop="controlLine"
                                label="控制线">
                            </el-table-column>
                            <el-table-column
                                prop="planEnrollment"
                                label="计划数">
                            </el-table-column>
                            <el-table-column
                                min-width="110px"
                                prop="minCastScore"
                                label="最低投档分数">
                            </el-table-column>
                            <el-table-column
                                min-width="110px"
                                prop="minScoreDifference"
                                label="最低投档分差">
                            </el-table-column>
                            <el-table-column
                                width="90px"
                                prop="ranking"
                                label="排名">
                            </el-table-column>
                            <el-table-column
                                width="115px"
                                prop="link"
                                label="专业链接">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div v-if="showFlag==3" class="table2">
                        <el-table
                        v-el-table-infinite-scroll="load"
                        height="900px"
                        :data="tableData"
                        :header-cell-style="theader"
                        :cell-style="tableRowStyle"
                        id="collegeTable"
                        >
                            <el-table-column
                                class-name="column"
                                prop="province"
                                label="省份">
                            </el-table-column>
                            <el-table-column
                                prop="score"
                                label="分数">
                            </el-table-column>
                            <el-table-column
                                prop="ranking"
                                label="排名">
                            </el-table-column>
                            <el-table-column
                                prop="year"
                                label="年份">
                            </el-table-column>
                        </el-table>
                    </div>
            </div>
            <!-- <div class="display" v-if="current===3">
                <div class="disopened">该功能暂未开放</div>
            </div> -->
        </div>

    </div>    
</template>

<script>
import tables from "../../components/Table"
export default {
    components:{
        tables
    },
    data(){
        return{
            subtitle:"'批次控制线'查看",
            explain:"填写相关信息后，点击我看“开始查询”，则考生可看到如下往年的批次控制线有关数据。",
            form:{
                school:""
            },
            current:1,
            showFlag:0,
            batchForm:{},
            province:"",
            color:"#33AAFF",
            showmore:0,
            tableData:[],
            loadingFlag:false,
            pageSize:10
        }
    },
    methods:{
        pageContral(flag){
            this.showFlag=0
            this.current=flag
            if(flag==1){
                this.subtitle="'批次控制线'查看"
                this.explain="填写相关信息后，点击我看“开始查询”，则考生可看到如下往年的批次控制线有关数据。"
            }
            else if(flag==2){
                this.subtitle="'一分一段表'查看"
                this.explain="填写相关信息后，点击我看“开始查询”，则考生可看到如下“一分一段表”有关数据"
            }
            else if(flag==3){
                this.subtitle="'最低投档线'查看"
                this.explain="填写相关信息后，可按照年份、省份、院校名称、院校类别、专业名称等进行个性化筛选，查阅往年相关录取信息。"
            }
        }, 
        search(){
            let provinceId=sessionStorage.provinceId
            this.pageSize=10
            //批次控制线
            if(this.current==1){
                this.loadingFlag=true
                this.$axios.post(`${this.baseURL}/batchControlLine/getQueryBatchControlLine?batch=${this.form.batches}&provinceId=${provinceId}&subject=${this.form.subject}&year=${this.form.year}`)
                .then(res=>{
                    console.log(res.data);
                    this.loadingFlag=false
                    if(res.data.data.length==0){
                        console.log('niua');
                        this.showFlag=0
                        this.$notify.error({
                            title:"失败",
                            message:"未查询到数据"
                        })
                    }
                    else{
                        this.showFlag=1
                        this.batchForm=res.data.data[0]
                    }    
                })
                .catch(err=>{
                    this.showFlag=0
                    this.loadingFlag=false
                    this.$notify({
                        title:"错误",
                        message:err,
                        type:"error"
                    })
                })
            }
            //一分一段表
            else if(this.current==2){
                this.loadingFlag=true
                this.showFlag=0
                this.$axios.post(`${this.baseURL}/OperateScoreRanking/queryScoreRanking?pageSize=${this.pageSize}&provinceId=${provinceId}&startIndex=1&subject=${this.form.subject}&year=${this.form.year}`)
                .then(res=>{
                    // console.log(res.data);
                    this.tableData=res.data.data
                    this.loadingFlag=false
                    this.showFlag=3
                })
                .catch(err=>{
                    this.showFlag=0
                    this.loadingFlag=false
                    this.$notify({
                        title:"错误",
                        message:err,
                        type:"error"
                    })
                })
            }
            //最低投档线
            // else if(this.current==3){
            //     this.loadingFlag=true
            //     this.showFlag=0
            //     this.$axios.post(`${this.baseURL}/collegeScoreSheet/getQueryMinimumPitchLine?batch=${this.form.batches}&provinceId=${provinceId}&subject=${this.form.subject}&year=${this.form.year}&collegeName=${this.form.school}&pageSize=${this.pageSize}&startIndex=1`)
            //     .then(res=>{
            //         // console.log(res.data);
            //         this.tableData=res.data.data
            //         this.loadingFlag=false
            //         this.showFlag=2
            //     })
            //     .catch(err=>{
            //         this.showFlag=0
            //         this.loadingFlag=false
            //         this.$notify({
            //             title:"错误",
            //             message:err,
            //             type:"error"
            //         })
            //     })
            // }
        },
        load(){
            let provinceId=sessionStorage.provinceId
            this.pageSize+=10
            this.$axios.post(`${this.baseURL}/OperateScoreRanking/queryScoreRanking?pageSize=${this.pageSize}&provinceId=${provinceId}&startIndex=1&subject=${this.form.subject}&year=${this.form.year}`)
            .then(res=>{
                // console.log(res.data);
                this.tableData=res.data.data
                this.loadingFlag=false
            })
            .catch(err=>{
                this.showFlag=0
                this.loadingFlag=false
                this.$notify({
                    title:"错误",
                    message:err,
                    type:"error"
                })
            })
        },
        //el-table表头样式自定义回调函数
        theader({row, column, rowIndex, columnIndex}){
          return `font-size:0.099rem;font-family:Noto Sans SC;font-weight: 100;color: #FFFFFF;height:0.338542rem;padding-left:10px;text-align:left;border-left:none;border-right:none;background-color:#33AAFF`
        },
        //el-table元素样式自定义回调函数
        tableRowStyle({row,rowIndex}){
          return{'height':'0.364583rem','text-align':'left','font-size':'0.080rem','font-family':'Noto Sans SC','font-weight': '400',
                  'color': '#3A3A3A',
                  'padding-left':'8px !important',
                  'border-bottom': `#33AAFF 1px solid`,
                  'border-left': 'none',
                  'border-right': 'none',}
        },
    },
    mounted(){
        this.province=JSON.parse(sessionStorage.trans_form).province
    }

}
</script>

<style scoped>
.main{
    min-height: 1000px;
    width: 100%;
}
.cover{
    position: absolute;
    top: -110px;
    z-index: 0;
    width: 1908px;
    height: 276px;
    /* text-align: center; */
    left: 50%;
    margin-left: -960px; 
    overflow: hidden;
}
.cover_c{
    position: relative;
    width: 100%;
}
.content{
    width: 1440px;
    /* margin-top: 240px; */
    margin: 0 auto;
    position: relative;
    /* top: 90px; */
    margin-top: 90px;
    display: flex;
    flex-direction: row;
}
.menu{
    width: 224px;
    height: 220px;
    background-color: #fff;
    padding: 5px 10px;
}
.menu_item{
    height: 90px;
    width: 100%;
    text-align: center;
    font-family: Noto Sans SC;
    font-size: 27px;
    font-weight: 500;
    line-height: 58px;
    cursor: pointer;
    transition-duration: 0.5s;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 10px;
}
.menu_item:hover{
    background-color: #41C1F2;
    color: #fff;
}
.display{
    width: 1300px;
    min-height: 900px;
    background-color: #fff;
    margin-left: 26px;
    margin-bottom: 30px;
}
.title{
    width: 170px;
    margin: 0 auto;
    text-align: center;
    font-family: Noto Sans SC;
    font-weight: 500;
    font-size: 42px;
    color: black;
    margin-top: 80px;
}
.middle{
    display: flex;
    flex-direction: row;
    margin-top:72px;
    /* margin-bottom: 47px; */
}
.blue{
    width: 8px;
    height: 40px;
    background: #33AAFF;
    margin-left: 88px;
}
.subtitle{
    font-size: 33px;
    font-family: Noto Sans SC;
    font-weight: 500;
    line-height: 43px;
    color: #000000;
    margin-left: 10px;
    letter-spacing: 1px;
}
.explain{
    font-size: 20px;
    font-family: Noto Sans SC;
    font-weight: 400;
    line-height: 31px;
    color: rgba(0, 0, 0, 0.45);
    /* width: 720px; */
    height: 18px;
    margin-left: 104px;
    margin-top: 18px;
    text-align: left;
}
.form{
    width: 500px;
    margin:80px auto;
    font-family: Noto Sans SC;
    font-weight: 400;
    font-size: 22px;
    /* height:50px; */
    /* background-color:black; */
}
#selectform>>>.el-form-item__label {
    font-size: 22px;
    font-family: Noto Sans SC;
    color: #333333;
    line-height: 45px;
}
#selectform>>>.el-form-item__content {
    text-align: left;
}
#selectform>>>.el-input__inner{
    border: 1px solid rgba(51, 170, 255, 1);
    border-radius: 8px;
    height: 100%;
    font-family: Noto Sans SC;
}
#selectform>>>.el-input{
    width: 325px;
    height: 45px;
}
.submit{
    width: 347px;
    height: 62px;
    /* background: #33AAFF; */
    opacity: 1;
    border-radius: 10px;
    font-size: 22px;
    /* font-family: Noto Sans SC; */
    font-weight: 300;
    line-height: 41px;
    color: #FFFFFF;
    margin-bottom: 50px;
    /* letter-spacing: 39px; */
}
.active{
    background-color: #41C1F2;
    color: #fff;
}
.table1{
    width: 800px;
    height: 195px;
    /* margin-left: 108px; */
    margin: 0 auto;
    margin-top:50px ;
}
.table2{
    width: 1150px;
    /* height: 195px; */
    /* margin-left: 108px; */
    margin: 0 auto;
    margin-top:50px ;
    margin-bottom:50px
}
table{
    border-collapse: collapse;
    width: 100%;
    border: 1px solid rgba(51, 170, 255, 1) !important;
}
th,td{
    height: 65px;
    text-align: left;
    font-size: 30px;
    font-family: Source Han Sans;
    font-weight: 400;
    line-height: 51px;
    color: #3A3A3A;
    background-color: rgba(198, 231, 255, 1);
    padding-left:20px;
    border: 1px solid rgba(51, 170, 255, 1) !important;
}
#second td{
    background-color: #fff;
}
#third td{
    color: rgba(255, 51, 51, 1);
}
#collegeTable /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
}

#collegeTable /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb  {
  background-color:rgba(162, 175, 184, 0.3);
  border-radius: 9px;
}
.disabled{
    display: none;
}
.disopened{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Noto Sans SC;
    font-size: 60px;
    font-weight: 600;

}
</style>